@import '../../../core/index.less';
@import '../../../core/function.less';

.orin-sw-reselectfield-root {
    padding: 0;
    margin: 0;
    height: 100%;
    position: relative;
    font-size: 14/@remScale;
    z-index: 1;
    user-select: none;

    .label {
        display: inline-block;
        vertical-align: middle;
        width: 5rem;
        line-height: 2.1rem;
        text-align: center;
        cursor: pointer;
    }
    label {
        color: @black-auxiliary;
    }
    .wrap {
        width: 100%;
        height: 100%;
        > div {
            border: 1/@rem  solid @border-color;
            height: 100%;
            //line-height: 42/@rem;
            padding: 0 0.5rem;
            display: flex;
            position: relative;
            align-items: center;
            justify-content: space-between;
            overflow: hidden;
            border-radius: 4px;
            cursor: pointer;
            &:hover {
                border: 1/@rem solid @border-hover-color;
            }

            .is-selected {
                color: @mainColor;
                cursor: pointer;
                .text-overflow(1);
            }
            .no-selected {
                cursor: pointer;
                color: @pinkish-darken-gray;
                font-weight: 300;
            }
            .icon-toggle {
                width: 10/@remScale;
                height: 10/@remScale;
                color: #999;
                margin: 0;
            }
            span {
                width: 0;
                height: 0;
                border-left: 5/@rem solid transparent;
                border-right: 5/@rem solid transparent;
                border-top: 7/@rem solid @pinkish-darken-gray;
                //display: none;
                //@media (max-width: @max1){
                //    display: block;
                //}

            }
        }
        > ul {
            display: none;
            max-height: 42 * 4 / @remScale;
            overflow-x: hidden;
            overflow-y: auto;
            width: 100%;
            line-height: 42/@rem;
            //border: 1px solid @border-color;
            border-radius: 4/@remScale;
            .boxShadow();
            background: #Fff;
            &::-webkit-scrollbar {
                width: 5/@remScale;
            }
            &::-webkit-scrollbar-thumb {
                background-color: #A6A6A6;
                border-left: 2/@remScale solid transparent;
            }
            &::-webkit-scrollbar-track {
                background-color: #E5E5E5;
                border-left: 2/@remScale solid transparent;
            }

            &.show {
                display: block;
            }
            li {
                cursor: pointer;
                display: flex;
                padding-left: 0.5rem;
                // &.title{
                //     // height: 30/@remScale;
                //     // line-height: 30/@remScale;
                //     color: @black-auxiliary;
                //     padding-left: 34/@remScale;
                //     // padding-top: 6/@remScale;
                // }
                &:hover {
                    background: @background-color;
                }
                &.active {
                    cursor: default;
                }
                span {
                    width: 30/@remScale;
                    height: 30/@remScale;
                    img {
                        display: block;
                        width: inherit;
                        height: inherit;
                    }
                    margin-right: 20/@remScale;
                }
                .icon {
                    margin-right: 8/@remScale;
                }
                label {
                    flex: 1;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    cursor: pointer;
                }
            }
            @media (max-width: @max1) {
                &::-webkit-scrollbar {
                    width: 5/@remScale;
                }

                &::-webkit-scrollbar-thumb {
                    background-color: #A6A6A6;
                    border-left: 2/@remScale solid transparent;
                }

                &::-webkit-scrollbar-track {
                    background-color: #E5E5E5;
                    border-left: 2/@remScale solid transparent;
                }
            }
        }
        .show {
            span {
                border-top: 0 none;
                border-bottom: 7/@rem solid @pinkish-grey;
            }
        }
        .borderline {
            border: 0;
            &:hover {
                border: 0;
            }
        }
    }

}

.theme-dark {
    .orin-sw-reselectfield-root {
        > div {
            padding: 0 10/@remScale;
            height: 30/@remScale;
            line-height: 30/@remScale;
            background-color: @dark_bgDarkColor;
            border-radius: @dark_borderRadius;
            cursor: pointer;
            display: flex;
            &.show {
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
            }
            label {
                color: @dark_fontColor;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                display: block;
                flex: 1;
            }
            span {
                width: 10/@remScale;
                height: 30/@remScale;
                position: relative;
                margin-left: 5/@remScale;
                &:after {
                    position: absolute;
                    content: '';
                    display: block;
                    width: 0;
                    height: 0;
                    top: 50%;
                    left: 50%;
                    border-left: 5/@remScale solid transparent;
                    border-right: 5/@remScale solid transparent;
                    border-top: 5/@remScale solid @dark_iconColor;
                    margin-top: -2/@remScale;
                    margin-left: -5/@remScale;
                }
            }
        }
        > ul {
            width: 100%;
            top: 30/@remScale;
            background-color: @dark_bgHighlightColor;
            border-bottom-left-radius: @dark_borderRadius;
            border-bottom-right-radius: @dark_borderRadius;
            box-shadow: 0 1px 6px 0px rgba(0, 0, 0, .3);
            li {
                .icon {
                    padding-right: 8/@remScale;
                }
                &.active {
                    background-color: @dark_bgDarkColor;
                    &:hover {
                        background-color: @dark_bgDarkColor;
                    }
                }
                height: auto;
                padding: 6/@remScale 16/@remScale;
                &:hover {
                    background-color: @dark_bgColor2;
                }
            }
        }
    }
}
